<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <video class="video" width="600" controls></video>
    <button class="record-btn">record</button>
    <script>
      let btn = document.querySelector('.record-btn')
      btn.addEventListener('click', async function () {
        let stream = await navigator.mediaDevices.getDisplayMedia({
          video: true
        })
        const mime = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
          ? 'video/webm; codecs=vp9'
          : 'video/webm'
        // 录制视频流
        let mediaRecorder = new MediaRecorder(stream, { mimeType: mime })
        let chunks = []
        mediaRecorder.addEventListener('dataavailable', function (e) {
          chunks.push(e.data)
        })
        mediaRecorder.addEventListener('stop', function () {
          let blob = new Blob(chunks, {
            type: chunks[0].type
          })
          let url = URL.createObjectURL(blob)
          let video = document.querySelector('video')
          video.src = url
        })
        mediaRecorder.start()
      })
    </script>
  </body>
</html>
